<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/email_register.css" />
	</head>

	<body id='zbody'>
		<script src="js/mui.min.js"></script>

		<div class='gray'>
			<span class='text'>邮箱地址*</span>
		</div>
		<div class='white'>
			<input id='email' placeholder="输入邮箱地址" class='texttwo' />
			<span class='erroe' id='erroe'>格式不正确</span>
		</div>
		<div class='gray'>
			<span class='text'>密码*</span>
		</div>
		<div class='white'>
			<input id='password' type="password" placeholder="请输入密码6~16位" class='texttwo' />
			<span class='erroe' id='erroe1'>密码位数太少</span>
		</div>
		<div class='gray'>
			<span class='text'>重新输入密码*</span>
		</div>
		<div class='white'>
			<input id='pass' type="password" placeholder="请输入密码6~16位" class='texttwo' />
			<span class='erroe' id='erroe2'>密码不一致</span>
		</div>
		<div class='gray'>
			<span class='text'>昵称</span>
		</div>
		<div class='white' id='white'>
			<input id='nickName' class="texttwo" placeholder="请输入昵称"></span>
		</div>
		<div class='bottom'>

			<div id='register'>
				<span id='clause'>注册并同意KoreaComics的<span id='tiaokuan'>使用条款</span>及<span id='people'>个人信息注册</span></span>
				<div id='zregister' style="background-color: green;">注册</div>
			</div>
		</div>

		<script src="js/url.js"></script>
		<script src="js/jquery.min.js"></script>
		<script>
			/*
												 如果你要用jQuery必须将下面这行代码放在第一行，然后将$符号换成jQuery
												 * */
			$.noConflict();
			jQuery('input').blur(function() {

				var zemail = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
				var zpassword = /[A-Za-z0-9_]{6,16}/;
				if(zemail.test(document.getElementById("email").value) &&
					zpassword.test(document.getElementById("password").value) &&
					document.getElementById("password").value == document.getElementById("pass").value &&
					document.getElementById("email").value != null &&
					document.getElementById("password").value != null &&
					document.getElementById("pass").value != null &&
					document.getElementById("nickName").value != null) {

					document.getElementById("zregister").addEventListener("tap", function() {

						jQuery.ajax({
							type: 'post',
							url: serverip.ip + '/register/email',
							data: {
								"account": document.getElementById("email").value,
								"password": document.getElementById("password").value,
								"nickname": document.getElementById("nickName").value
							},
							dataType: 'json',
							xhrFields: {
								withCredentials: true
							},
							crossDomain: true,
							success: function(data) {
								if(data == 0) {
									mui.openWindow({
										url:'emailValidation.html'
									})
								}
							}
						});
					});

				}
			});
		</script>

		<script type="text/javascript">
			/*邮箱验证*/
			var zemail = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;

			document.getElementById("email").addEventListener("tap", email1);

			function email1() {
				var email = document.getElementById("email").value;
				if(email == "输入邮箱地址") {
					document.getElementById("email").style.color = "black";
					document.getElementById("email").value = "";
				}
				if(document.getElementById("email").value == "") {
					document.getElementById("email").style.color = "black";
				}
			}

			document.getElementById("email").addEventListener("blur", email);

			function email() {
				var email = document.getElementById("email").value;
				if(email == "") {
					document.getElementById("erroe").style.display = "none";
					document.getElementById("email").style.color = "red";
					document.getElementById("email").value = "输入邮箱地址";
				}
				if(email != "" && email != "输入邮箱地址") {
					if(!zemail.test(email)) {
						document.getElementById("erroe").style.display = "block";
					}
				}
				if(zemail.test(email)) {
					document.getElementById("erroe").style.display = "none";
				}
			}

			/*密码正则验证*/
			var zpassword = /[A-Za-z0-9_]{6,16}/;

			document.getElementById("password").addEventListener("tap", password1);

			function password1() {
				var password = document.getElementById("password").value;
				if(password == "请输入密码(6~16位)") {
					document.getElementById("password").type = "password";
					document.getElementById("password").style.color = "black";
					document.getElementById("password").value = "";
				}
			}

			document.getElementById("password").addEventListener("blur", password);

			function password() {
				var password = document.getElementById("password").value;
				if(password == "") {
					document.getElementById("password").type = "text";
					document.getElementById("password").style.color = "red";
					document.getElementById("password").value = "请输入密码(6~16位)"
					document.getElementById("erroe1").style.display = "none";
				}
				if(password != "" && password != "请输入密码(6~16位)") {
					if(!zpassword.test(password)) {
						document.getElementById("erroe1").style.display = "block";
					}
				}
				if(zpassword.test(password)) {
					document.getElementById("erroe1").style.display = "none";
				}
			}

			document.getElementById("pass").addEventListener("blur", pass);

			function pass() {
				var password = document.getElementById("password").value;
				var pass = document.getElementById("pass").value;
				if(pass == "") {
					document.getElementById("pass").type = "text";
					document.getElementById("pass").style.color = "red";
					document.getElementById("pass").value = "请输入密码(6~16位)"
					document.getElementById("erroe2").style.display = "none";
				}
				if(pass != "" && pass != "请输入密码(6~16位)") {
					if(password != pass) {
						document.getElementById("erroe2").style.display = "block";
					}
				}
				if(password == pass) {
					document.getElementById("erroe2").style.display = "none";
				}
			}

			document.getElementById("pass").addEventListener("tap", pass1);

			function pass1() {
				var pass = document.getElementById("pass").value;
				if(pass == "请输入密码(6~16位)") {
					document.getElementById("pass").type = "password";
					document.getElementById("pass").style.color = "black";
					document.getElementById("pass").value = "";
				}
			}
		</script>

	</body>

</html>